<template>
  <div class="basic_card_module">
    <header>
      <i :class="['iconfont', generateMainIcon()]" />
      <span>{{ title }}</span>
    </header>
    <section>
      <scroll-num
        class="scroll-num"
        :num="num"
        :height="45"
        :fontStyle="{
          fontSize: '35px',
          fontWeight: 600,
          width: '21px'
        }"
      />
      <div class="rate">
        <div :class="['rate-num', rate > 0 ? 'up-rate' : 'down-rate']">
          <i
            :class="{
              iconfont: true,
              'icon-raise': rate > 0,
              'icon-down': rate < 0
            }"
          />
          <span>{{ formatRate }}</span>
        </div>
        <span>{{ subTitle }}</span>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { Dictionary } from 'vue-router/types/router'
import ScrollNum from '@/components/tool/ws-scroll-num.vue'
@Component({
  components: {
    ScrollNum
  }
})
class BasicCard extends Vue {
  // 展示的数字
  @Prop({ default: 0 }) num!: number
  // 变化比率
  @Prop({ default: 0 }) rate!: number
  // 卡片类型
  @Prop({ default: 'primary' }) type!: string
  // 主标题
  @Prop({ required: true }) title!: string
  @Prop({ required: true }) subTitle!: string
  get formatRate() {
    return Math.abs(this.rate * 100).toFixed(2) + '%'
  }
  generateMainIcon() {
    const icons: Dictionary<string> = {
      primary: 'icon-template',
      warning: 'icon-warning',
      success: 'icon-success',
      error: 'icon-remind'
    }
    return icons[this.type] ? icons[this.type] : ''
  }
}
export default BasicCard
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.basic_card_module {
  box-sizing: border-box;
  padding: 10px;
  min-width: 220px;
  border-radius: 10px;
  #flex(column, flex-start, space-between);
  #color(background-color, --module-bg-color);
  #shadow-color(0, 0, 4px, 1px, --primary-shadow-color);
  header {
    margin-bottom: 10px;
    #flex(row, center, flex-start);
    i {
      box-sizing: border-box;
      margin-right: 5px;
      border-radius: 20px;
      font-size: 18px;
      text-align: center;
      width: 28px;
      line-height: 28px;
    }
    span {
      font-size: 16px;
      line-height: 28px;
      #color(color, --primary-text-color);
    }
    .icon-template {
      #color(color, --primary-blue-color);
      #color(background-color, --gray-blue-color);
    }
    .icon-warning {
      #color(color, --primary-yellow-color);
      #color(background-color, --gray-yellow-color);
    }
    .icon-success {
      #color(color, --primary-green-color);
      #color(background-color, --gray-green-color);
    }
    .icon-remind {
      #color(color, --primary-red-color);
      #color(background-color, --gray-red-color);
    }
  }
  section {
    width: 100%;
    #flex(row, flex-end, space-between);
    .rate {
      #flex(column, flex-start, flex-end);
      .rate-num {
        span {
          font-size: 14px;
        }
        .icon-down {
          display: inline-block;
          transform: scaleX(-1);
        }
      }
      .up-rate > span,
      .icon-raise {
        #color(color, --primary-green-color);
      }
      .down-rate > span,
      .icon-down {
        #color(color, --primary-red-color);
      }
      span {
        font-size: 12px;
        #color(color, --lighter-text-color);
      }
    }
  }
}
</style>
